 <!-- 订单管理页面 -->
<template>
  <!-- 面包屑导航条 -->
  <div class=" bg-red-50">
    <div>
      <v-breadcrumbs class="text-xl" :items="items">
        <template v-slot:divider>
          <v-icon icon="mdi-chevron-right"></v-icon>
        </template>
      </v-breadcrumbs>
    </div>
    <v-card width="1200px" class="mx-auto">
      <v-tabs v-model="tab" bg-color="orange-darken-2">
        <v-tab value="one">待发货</v-tab>
        <v-tab value="two">已发货</v-tab>
        <v-tab value="three">已收货</v-tab>
      </v-tabs>
      <!-- 搜索框 -->
      <v-card color="grey-lighten-3" style="display:flex;width:350px;" class="ml-4 mt-6">
        <v-text-field v-model="formInline.orderId" :loading="loading" density="compact" variant="solo" label="请输入订单号"
          single-line hide-details @click:append-inner="onClick"></v-text-field>
      </v-card>
      <!-- 搜索按钮 -->
      <v-btn type="submit" style="background-color:#fff;
                  border-radius:10%;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1);
                  margin:-100px 370px;margin-top:-165px;
                  background-color:dodgerblue;color:#fff;" @click="getData()">搜索</v-btn>
      <!-- 订单表格 -->
      <v-card-text>
        <v-window v-model="tab">
          <v-window-item value="one">
            <v-table density="compact" fixed-header height="480px">
              <thead>
                <tr>
                  <th class="text-left">订单号</th>
                  <th class="text-left">收货人</th>
                  <th class="text-left">收货地址</th>
                  <th class="text-left">联系方式</th>
                  <th class="text-left">产品id</th>
                  <th class="text-left">产品名</th>
                  <th class="text-left">产品规格</th>
                  <th class="text-left">数量</th>
                  <th class="text-left">下单时间</th>
                  <th class="text-left">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in tableDataUndelivered" :key="item.id">
                  <td>{{ item.orderId }}</td>
                  <td>{{ item.userName }}</td>
                  <td>{{ item.address }}</td>
                  <td>{{ item.phone }}</td>
                  <td>{{ item.productId }}</td>
                  <td>{{ item.productName }}</td>
                  <td>{{ item.specName }}</td>
                  <td>{{ item.amount }}</td>
                  <td>{{ item.createTime }}</td>
                  <td>
                    <v-btn style=" background-color:rgb(57, 152, 247);color: #FFFFFF;
                  border-radius:10%;box-shadow:3px 2px 1px rgba(0, 0, 0, 0.1);height:30px"
                      @click="updateOrderStatus(item.orderId)">发货</v-btn>
                  </td>
                </tr>
              </tbody>
            </v-table>
            <v-card>共有{{ totalUndelivered }}订单待发货</v-card>
          </v-window-item>
          <v-window-item value="two">
            <v-table density="compact" fixed-header height="480px">
              <thead>
                <tr>
                  <th class="text-left">订单号</th>
                  <th class="text-left">收货人</th>
                  <th class="text-left">收货地址</th>
                  <th class="text-left">联系方式</th>
                  <th class="text-left">产品id</th>
                  <th class="text-left">产品名</th>
                  <th class="text-left">产品规格</th>
                  <th class="text-left">数量</th>
                  <th class="text-left">创建时间</th>
                  <th class="text-left">发货时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in tableDataShipped" :key="item.id">
                  <td>{{ item.orderId }}</td>
                  <td>{{ item.userName }}</td>
                  <td>{{ item.address }}</td>
                  <td>{{ item.phone }}</td>
                  <td>{{ item.productId }}</td>
                  <td>{{ item.productName }}</td>
                  <td>{{ item.specName }}</td>
                  <td>{{ item.amount }}</td>
                  <td>{{ item.createTime }}</td>
                  <td>{{ item.sendTime }}</td>
                </tr>
              </tbody>
            </v-table>
            <v-card>共有{{ totalShipped }}订单已发货 </v-card>
          </v-window-item>
          <v-window-item value="three">
            <v-table density="compact" fixed-header height="480px">
              <thead>
                <tr>
                  <th class="text-left">订单号</th>
                  <th class="text-left">收货人</th>
                  <th class="text-left">收货地址</th>
                  <th class="text-left">联系方式</th>
                  <th class="text-left">产品id</th>
                  <th class="text-left">产品名</th>
                  <th class="text-left">产品规格</th>
                  <th class="text-left">数量</th>
                  <th class="text-left">创建时间</th>
                  <th class="text-left">发货时间</th>
                  <th class="text-left">收货时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in tableReceived" :key="item.id">
                  <td>{{ item.orderId }}</td>
                  <td>{{ item.userName }}</td>
                  <td>{{ item.address }}</td>
                  <td>{{ item.phone }}</td>
                  <td>{{ item.productId }}</td>
                  <td>{{ item.productName }}</td>
                  <td>{{ item.specName }}</td>
                  <td>{{ item.amount }}</td>
                  <td>{{ item.createTime }}</td>
                  <td>{{ item.sendTime }}</td>
                  <td>{{ item.receiptTime }}</td>
                </tr>
              </tbody>
            </v-table>
            <v-card>共有{{ totalReceived }}条订单已收货</v-card>
          </v-window-item>
        </v-window>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      formInline: {// 搜索栏
        orderId: '',
      },
      // 面包屑
      items: [
        {
          title: '首页',
          disabled: false,
          href: '/',
        },
        {
          title: '订单管理',
          disabled: false,
        },
      ],
      tableData: [],
      totalUndelivered: 0,
      totalShipped: 0,
      totalReceived: 0,
      tab: null,
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectOrdersInfoByBusinessId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          orderId: this.formInline.orderId,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.ordersInfo
          this.totalUndelivered = res.data.data.totalUndelivered
          this.totalShipped = res.data.data.totalShipped
          this.totalReceived = res.data.data.totalReceived
        }
      } )
    },
    // 发货
    updateOrderStatus( orderId ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateOrderStatus',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          orderId: orderId,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.getData()
        }
      } )
    }
  },
  computed: {
    tableDataUndelivered() {
      return this.tableData.filter( function ( data ) {
        return data.status === '待发货'
      } )
    },
    tableDataShipped() {
      return this.tableData.filter( function ( data ) {
        return data.status === '已发货'
      } )
    },
    tableReceived() {
      return this.tableData.filter( function ( data ) {
        return data.status === '已收货'
      } )
    },
  },
}
</script>
